<template>
  <view class="controlList">
    <template v-for="item in getMenuList">
      <view class="controlItem">
        <template v-if="item.params.picUrl != ''">
          <button
            @click="handle"
            class="u-reset-button"
            v-if="item.kefuType == '0'"
            open-type="contact"
            :style="{
              background: `url(${item.params.picUrl}) 0 0 / cover no-repeat`
            }"
          ></button>
          <image
            @click="clickControl(item)"
            v-else
            :src="item.params.picUrl"
            alt=""
            lazy-load
            mode="widthFix"
          />
        </template>
        <template v-else>
          <image
            @click="clickControl(item)"
            :src="asyncImgs.diy.phone"
            alt=""
            lazy-load
            v-if="item.controlComName == 'widgetPhoneControl'"
            mode="widthFix"
          />
          <template v-else>
            <button
              class="u-reset-button"
              v-if="item.kefuType == '0'"
              open-type="contact"
              :style="{
                background: `url(${asyncImgs.diy.wechat}) 0 0 / cover no-repeat`
              }"
            ></button>
            <image
              @click="clickControl(item)"
              v-else
              :src="asyncImgs.diy.wechat"
              alt=""
              lazy-load
              mode="widthFix"
            />
          </template>
        </template>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  props: {
    controlList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },

  computed: {
    getMenuList() {
      let list = this.controlList.filter(
        (el) => el.show_type === "list" && el.is_show
      );
      // #ifdef MP-ALIPAY
      list = list.filter((el) => el.kefuType != 0);
      // #endif

      return list;
    }
  },

  methods: {
    clickControl(e) {
      switch (e.controlComName) {
        case "widgetPhoneControl":
          if (e.params && e.params.phone != "") {
            this.$utils.makePhoneCall(e.params.phone);
          }
          break;

        case "widgetWxControl":
          if (this.stores.kefu_id == "") {
            uni.showToast({
              title: "当前商城还未设置客服",
              icon: "none",
              duration: 2000
            });
            return;
          }

          this.$utils.toUrl("/kefu/kefu");
          break;

        default:
          break;
      }
    },

    handle() {
      // #ifdef MP-ALIPAY
      uni.showToast({
        title: "当前环境不支持此操作",
        icon: "none",
        duration: 2000
      });
      // #endif
    }
  }
};
</script>

<style lang="scss" scoped>
.controlList {
  position: fixed;
  right: 30rpx;
  bottom: 240rpx;
  .controlItem {
    position: relative;
    width: 80rpx;
    margin-bottom: 30rpx;
    > button {
      width: 80rpx;
      height: 80rpx;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .contact {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}
</style>
